<template>
    <el-table
        :data="musicList.tracks"
        stripe
        style="width: 100%"
        @row-dblclick="clickRow"
    >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column width="50">
            <template>
                <i class="iconfont icon-download"></i>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="音乐标题"> </el-table-column>
        <el-table-column prop="ar[0].name" label="歌手"> </el-table-column>
        <el-table-column prop="al.name" label="专辑"> </el-table-column>
        <el-table-column prop="dt" label="时长"> </el-table-column>
    </el-table>
</template>

<script>
export default {
    props: {
        musicList: []
    },
    data() {
        return {};
    },
    watch: {},
    methods: {
        clickRow(row) {
            this.$store.commit("updateMusicId", row.id);

            if (this.musicList.id != this.$store.state.musicListId) {
                // 将歌单传到vuex
                this.$store.commit("updateMusicList", {
                    musicList: this.musicList.tracks,
                    musicListId: this.musicList.id
                });
            }
        }
    }
};
</script>

<style></style>
